<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet"
		      href="css/bootstrap.min.css" />
			  <style>
				  .container{
					  width: 300px;
				  }
				  .btn-success{
					  background-color:lightcoral;
					  border: lightcoral;
				  }
				  .btn-danger{
					  background-color: #CCCCCC;
					  border: #CCCCCC;
				  }
				  
				  
			  </style>
	</head>
	<body>
		<div class="container">
			<h2>用户登录</h2>
			<!--提示信息区:-->
			<div id="msg" style="display:none;">登录成功</div>
			
			<div class="form-group">
				<label>用户名:</label>
				<input class="form-control" 
					type="text" 
					id="name" name="name"
					autocomplete="off"
					placeholder="请输入用户名" />
				</form>
	 		</div>
			<div class="form-group">
				<label>密码:</label>
				<input class="form-control" 
					type="password" 
					id="psw" name="psw"
					autocomplete="off" 
					placeholder="请输入密码" />
			</div>
			<div>
				<button class="btn btn-block btn-success" 
					id="btnSubmit" 
					onclick="doSubmit()">
					登录
				</button>
				<button class="btn btn-block btn-danger" 
					id="btnClear"
					onclick="doClear()">
					取消
				</button>
			</div>
		</div>
	</body>
	<script>
		function doSubmit(){
			var name=document.getElementById("name");
			var psw=document.getElementById("psw");
			var msg=document.getElementById("msg");
			msg.innerText=name.value+"登陆成功";
			msg.style="display:block;color: white; padding: 10px; background-color:darkgreen";
			console.log("username:"+name.value),
			console.log("password:"+psw.value)
		}
		
		function doClear(){
			document.getElementById("name").value="";
			document.getElementById("psw").value="";
		}
	</script>
	
	
	
	
	
</html>
